<template>
  <div class="songItem" @click="play(item)">
    <div><slot></slot></div>
    <div class="left">
      <h3 v-html="$options.filters.highLight(item.name, keywords)"></h3>
      <p>
        <template v-if="item.song">{{ item.song.artists[0].name }}</template
        ><template v-if="item.artists"
          ><span
            v-html="$options.filters.highLight(item.artists[0].name, keywords)"
          ></span
        ></template>
        <template v-if="item.ar">
          {{ item.ar[0].name }}
        </template>
        -
        <span v-html="$options.filters.highLight(item.name, keywords)"></span>
      </p>
    </div>
    <!-- 播放动画 -->
    <div class="playingImg" v-if="$root.musicStore.musicID==item.id">
      <div>
        <i></i>
        <i></i>
        <i></i>
      </div>
    </div>
    <!-- 播放按钮 -->
    <span class="playbtn iconfont icon-bofang" v-else></span>
  </div>
</template>
<script>
export default {
  name: "SongItem",
  props: ["item", "keywords"],
  methods: {
    play(item) {
      this.playingImg = true;
      // this.$emit('play',item.id)//组件传值的方式 触发父组件的play 并 传递音乐id
      //换种便捷的方式,把播放音乐相关的数据存储在vue实例中
      this.$root.musicStore.musicID = item.id;
      this.$root.musicStore.currentMusic = item;
      // console.log('当前播放音乐的信息==>',this.$root.musicStore.currentMusic);
      // this.$root.musicStore.musicList.unshift(item)//把当前歌曲放进播放列表的末尾
      //处理去重问题
      let newArr = this.$root.musicStore.musicList;
      let find = false;
      for (let n of newArr) {
        if (n.id == item.id) {
          find = true;
        }
      }
      if (!find) {
        this.$root.musicStore.musicList.push(item);
      }
      //把当前歌曲列表全部加入播放歌单列表
      this.$emit("add-list");
    },
  },
  filters: {
    //调用$options.filters.highLight()
    //val里面如果有keywords的值 替换成html
    highLight(val, keywords) {
      //判断有无传递关键字keywords 如果没有就不做正则替换
      if (typeof keywords == "undefined") {
        return val;
      }
      let reg = new RegExp(keywords.trim(), "g"); //根据关键字创建正则对象
      if (reg.test(val)) {
        return val.replace(
          reg,
          '<span class="highLight">' + keywords + "</span>"
        );
      }
      return val;
    },
  },
};
</script>
<style lang="less">
.songItem {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(187, 184, 162);
  padding: 10px 0px 10px 13px;
  .left {
    flex: 1;
    h3 {
      color: white;
    }
    p {
      color: rgb(189, 189, 179);
      font-size: 12px;
    }
  }
  span.highLight {
    color: rgb(255, 208, 0);
  }
  .playbtn {
    margin-right: 10px;
    font-size: 30px;
    color: rgb(223, 218, 202);
  }
}

.playingImg {
  margin-right: 18px;
  div {
    width: 14px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    i {
      display: inline-block;
      width: 3px;
      height: 15px;
      background-color: rgb(255, 208, 0);
      // transform-origin:bottom;
      animation: loading 0.5s linear 0.2s infinite alternate-reverse;
      &:nth-of-type(2) {
        animation-delay: -0.2s;
      }
      &:nth-of-type(3) {
        animation-delay: -0.4s;
      }
    }
  }
}
@keyframes loading { 
  0% {
    transform: scaleY(0.4);
  }
  100% {
    transform: scaleY(1.2);
  }
}
</style>
